<template>
  <div class="all">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="就诊人管理"
      left-arrow
      border
      @click-left="back"
      fixed
    />
    <van-notice-bar
      left-icon="volume-o"
      text="最多可以添加3位联系人"
      background="#faf1ea"
      color="#fea761"
      style="margin-top: 46px"
    />

    <!-- 下方整体div -->
    <div class="total">
      <div class="box">
        <!-- 标题 -->

        <span>请选择就诊人</span>

        <!-- 卡片部分 -->
        <van-row
          type="flex"
          class="card"
          v-for="(item, index) in datalist"
          :key="index"
        >
          <van-col span="12" class="text">{{ item.name }} <span class="name_tag">{{item.relation}}</span></van-col>
          <van-col span="12" class="text" style="margin-top: 5px">{{
            item.id_number | hidden
          }}</van-col>
        </van-row>

        <!-- 按钮部分 -->
        <van-button @click="go" round block type="info" color="#1074ff" style="margin-bottom: 20px">添加就诊人</van-button>
        <!-- <van-button type="info">信息按钮</van-button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: null,
    };
  },
  mounted() {
    this.getDate();
  },
  methods: {
    // 转跳到下一个页面
    go() {
      this.$router.push("/addpatient");
    },
    back() {
      this.$router.push('/personalcenter');
    },
    getDate() {
      let id= sessionStorage.getItem('uid')
      let url = `${this.$base}patient/patient_list?uid=${id}`;
      this.axios.get(url).then((res) => {
        this.datalist = res.data.data;
      });
    },
  },
  filters: {
    hidden: function(value) {
      return value=value.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2");
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.all {
  height: 100%;
  overflow: hidden;
}
.total {
  width: 100%;
  margin-top: 20px;
}
.box {
  width: 95%;
  padding: 0px 10px 0 10px;
}
.card {
  flex-direction: column;
  margin-top: 20px;
  background-color: #f5f9fe;
  box-shadow: 0 1px 1px #e3e3e3;
  font-size: 15px;
  border-radius: 15px;
  min-height: 108px;
  justify-items: center;
}
.text {
  margin-top: 30px;
  margin-left: 20px;
}
.name_tag {
  margin-left: 2vw;
  font-size: 3vw;
  padding: 1vw 2.5vw;
  color: #006EFF;
  border-radius: 2.5vw;
  background-color: #E2EDFE;
}
.van-notice-bar {
  height: 30px;
  font-size: 12px;
}
button {
  margin-top: 15px;
  width: 100%;
  background-color: #01d99d;
  border-radius: 10px;
  line-height: 40px;
  border: none;
  color: white;
}
</style>